<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Demo</title>
    <link rel="stylesheet" href="citySelector.css">
    <style type="text/css">
        .cityinput{
            border-width: 1px;
            border-style: solid;
            border-color: #666 #ccc #ccc #666;
            height: 24px;
            line-height: 24px;
            width: 175px;
            font-size: 12px;
            padding-left: 2px;
            background: url(http://img02.taobaocdn.com/tps/i2/T1EPyLXm0hXXXXXXXX-200-100.png) no-repeat 150px 5px;
            }
    </style>
</head>
<body>
<input type="text" class="cityinput" id="citySelect" value="城市名">
<br/>

<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6" >
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6" >
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<input type="text" class="cityinput" id="citySelect1" value="城市名">
<select name="IE6" >
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6" >
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<br/>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6" >
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6" >
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<br/>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<br/>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<br/>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<br/>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<br/>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<br/>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<br/>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<br/>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<br/>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<br/>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<br/>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<!--<div class="citySelector">
    <ul class="cityslide" id="citySlide">
       &lt;!&ndash; <li><b class="cityname">上海</b><b class="cityspell">shanghai</b></li>
        <li><b class="cityname">上海</b><b class="cityspell">shanghai</b></li>
        <li><b class="cityname">上海</b><b class="cityspell">shanghai</b></li>
        <li><b class="cityname">上海</b><b class="cityspell">shanghai</b></li>
        <li><b class="cityname">上海</b><b class="cityspell">shanghai</b></li>
        <li><b class="cityname">上海</b><b class="cityspell">shanghai</b></li>
        <li><b class="cityname">上海</b><b class="cityspell">shanghai</b></li>
        <li><b class="cityname">上海</b><b class="cityspell">shanghai</b></li>
        <li><b class="cityname">上海</b><b class="cityspell">shanghai</b></li>&ndash;&gt;
        <li class="empty">对不起，没有找到数据 "<em>ssss</em>"</li>
    </ul>
    <p></p>
    <div class="cityBox" id="cityBox">
        <p class="tip">热门城市(支持汉字/拼音)</p>
        <ul>
            <li class="on">热门城市</li>
            <li>ABCDEFGH</li>
            <li>IJKLMNOP</li>
            <li>QRSTUVWXYZ</li>
        </ul>
        <div class="hotCity">
            <div class="cityTab hide">
                <dl>
                    <dt>A</dt>
                    <dd><a href="#">北京</a><a href="#">上海</a><a href="#">广州</a><a href="#">重庆</a><a href="#">深圳</a></dd>
                </dl>
            </div>
            <div class="cityTab">
                <dl>
                    <dt>A</dt>
                    <dd><a href="#">北京</a><a href="#">上海</a><a href="#">广州</a><a href="#">重庆</a><a href="#">深圳</a></dd>
                </dl>
                <dl>
                    <dt>B</dt>
                    <dd><a href="#">北京</a><a href="#">上海</a><a href="#">广州</a><a href="#">重庆</a><a href="#">深圳</a><a href="#">重庆</a><a href="#">深圳</a><a href="#">深圳</a></dd>
                </dl>
                <dl>
                    <dt>C</dt>
                    <dd><a href="#">北京</a><a href="#">上海</a><a href="#">广州</a><a href="#">重庆</a><a href="#">深圳</a></dd>
                </dl>
            </div>
        </div>
    </div>
</div>-->
<script src="citySelector.js" type="text/javascript"></script>
<script type="text/javascript">
    var test=new Vcity.CitySelector({input:'citySelect'});
    var test2=new Vcity.CitySelector({input:'citySelect1'});
</script>
</body>
</html>